import { StatusBar } from 'expo-status-bar';
import { ImageBackground, StyleSheet, Text, ToastAndroid, TouchableOpacity, View, TextInput, Image } from 'react-native';
import React, { useState } from "react";

import { useAuth } from '../context/AuthProvider';

export default function Login({ navigation }) {
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const { setUser } = useAuth();
    const onRegister = () => {
        navigation.navigate('Register')
    }

    const onBtn = () => {
        fetch('http://10.7.89.174:3000/forwordlogin', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                userName: username,
                password: password,
            })
        })
            .then(res => res.json())
            .then(res => {
                if (res.code == 200) {
                    setTimeout(() => {
                        ToastAndroid.show("登录成功", ToastAndroid.SHORT);
                        navigation.navigate('tab')
                        setUser(res.message[0])
                    }, 0)
                } else {
                    ToastAndroid.show("登录失败", ToastAndroid.SHORT);
                }
            })
    };
    return (
        <View style={styles.container}>
            <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
                <Image source={require('../img/logo.jpg')} style={styles.logo}></Image>
                <TextInput
                    placeholder="手机号/用户名"
                    onChangeText={text => setUsername(text)} //读取用户的输入,从TextInput里取值的唯一做法！）
                    value={username}
                    style={[styles.inputStyle]}
                />
                <TextInput
                    secureTextEntry={true}  //文本框会遮住之前输入的文字
                    placeholder="密码"
                    onChangeText={text => setPassword(text)}
                    value={password}
                    style={[styles.inputStyle]}
                />
                <TouchableOpacity style={styles.resigterBtn}>
                    <Text style={styles.resigterText} onPress={onRegister}>未注册？请先注册</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.forgetBtn}>
                    <Text style={styles.resigterText} onPress={() => { navigation.navigate('Forget') }}>忘记密码？</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.btnStyle}>
                    <Text style={styles.loginText} onPress={() => onBtn()}>登录</Text>
                </TouchableOpacity>

                <StatusBar style="auto" />
            </ImageBackground>

        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'space-between',
        flex: 1,
    },
    bgimg: {
        flex: 1,
        resizeMode: "cover",
    },
    logo: {
        width: 200,
        height: 200,
        marginTop: "25%",
        marginBottom: "6%",
        marginLeft: "25%"
    },
    inputStyle: {
        width: '80%',
        height: 35,
        marginLeft: 'auto',
        marginRight: 'auto',
        marginTop: 10,
        borderRadius: 8,
        borderColor: '#cacaca',
        borderWidth: 1,
        borderRadius: 8,
        paddingLeft: 15,
    },
    resigterBtn: {
        height: "4%",
        width: '26%',
        borderRadius: 5,
        marginTop: '2%',
        marginLeft: "10%",
        backgroundColor: 'white',
        justifyContent: 'center',
    },
    resigterText: {
        textAlign: 'center',
        color: 'orange',
        textAlignVertical: 'center',
        fontSize: 13
    },
    forgetBtn: {
        height: "4%",
        width: '15%',
        borderRadius: 5,
        marginTop: '-6%',
        marginLeft: "75%",
        backgroundColor: 'white',
        justifyContent: 'center',
    },
    btnStyle: {
        marginLeft: 'auto',
        marginRight: 'auto',
        height: 40,
        width: '80%',
        borderRadius: 5,
        marginTop: 20,
        backgroundColor: 'orange',
        justifyContent: 'center',
    },
    loginText: {
        textAlign: 'center',
        color: 'white',
        textAlignVertical: 'center',
        fontSize: 17
    },

})
